<template>
    <div>
<!--        收藏夹{{subject_id}}{{subject_name}}-->
        <div>
            <el-radio-group v-model="currentType" @change="typeChange">
                <el-radio :label="item.value" v-for="(item,index) in types" :key='index'>{{item.name}}</el-radio>
            </el-radio-group>
        </div>
        <div class='question_collect_list'>
<!--            {{checkList}}-->
            <el-checkbox-group v-if="isNull" v-model="checkList">
                <div>
                    {{item}}
                </div>
                <div class="collect" v-for="(item,index) in collectList.rows" :key='index'>
                    <el-checkbox :label="item">
                        <div class="collect-content" v-html="item.topic.stem">
                        </div>
                        <el-button type="primary" size='small' @click="lookQuestion(item.topic.id)">查看</el-button>
                    </el-checkbox>
                </div>
            </el-checkbox-group>
            <el-empty v-if="!isNull" image-size="200" description="暂无收藏"/>
        </div>
        <div class="bottom-div">
            <div>
                <el-button @click="removeCollect" :disabled="!checkList.length">
                    取消收藏
                </el-button>
                <el-button :disabled="collectList && collectList.rows && !collectList.rows.length" type="primary" @click="questionAll">
                    练习全部题目
                </el-button>
            </div>
            <div v-if="collectList.pagination">
                <el-pagination
                        background
                        v-model:currentPage="currentPage"
                        :page-size="pageSize"
                        layout="total, prev, pager, next"
                        :total="collectList.pagination.count"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
            </div>
        </div>
        <div>

        </div>
    </div>
</template>

<script>
    import goBackHistory from "../../../utils/hook/goBackHistory";
    import {toRefs, reactive, watchEffect,watch} from 'vue'
    import {collect, errorSet, getCollectTopics, typeCodeList, collectRemove} from "../../../api/api";
    import {ElMessage} from "element-plus";
    import {useRouter} from 'vue-router'

    export default {
        name: "index",
        props: {
            subject_id: {
                type: Number
            },
            subject_name: {
                type: String
            },
            activeCourse:{
                type:String
            }
        },
        setup(props) {
            //收藏夹列表
            let data = reactive({
                pageSize: 10,
                currentPage: 1,
                collectList: [],
                question_types: [],
                checkList: [],
                isNull: false,
                currentType: null,
                types: [{name: "全部", value: null},
                          {name: "单项选择题", value: 1},
                          {name: "多项选择题", value: 2},
                          {name: "不定项选择题", value: 3},
                          {name: "判断题", value: 4},
                          {name: "填空题", value: 5},
                          {name: "简答题", value: 6},
                          {name: "论述题", value: 7},
                          {name: "案例题", value: 8},
                          {name: "综合题", value: 9},
                          {name: "平台操作题", value: 10}]
            })

            let router = useRouter();

            let getCollect = () => {
                collect({
                    courseID:localStorage.getItem('activeCourse'),
                    type: 2,
                    typeCode: data.currentType,
                    page: data.currentPage,
                    pageSize: data.pageSize
                }).then(res => {
                    console.log('收藏夹列表', res.data)
                    data.collectList = res.data
                    data.isNull = res.data.rows.length ? true : false
                })
            }
            getCollect();

            watch(() => props.activeCourse,() =>{
                getCollect();
            })

            const handleSizeChange = (val) => {
                console.log(`${val} items per page`)
                data.pageSize = val;
                getCollect();
            }
            const handleCurrentChange = (val) => {
                console.log(`current page: ${val}`)
                data.currentPage = val;
                getCollect();
            }

            let removeCollect = () => {
                let params = {
                    ids: data.checkList.map(item => item.id)
                }
                collectRemove(params).then(res => {
                    console.log(res);
                    ElMessage({type: 'success', message: '已取消收藏'});
                    data.checkList = [];
                    getCollect();
                })
            }

            let lookQuestion = (q_id) => {
                router.push({
                    name: 'Collect_or_Question',
                    params: {subject_name: localStorage.getItem('activeCourseName'), id: q_id, method: 'collectTopic'}
                })
            }

            let questionAll = () => {
                router.push({
                    name: 'Collect_or_QuestionAll',
                    params: {
                        subject_name: localStorage.getItem('activeCourseName'),
                        topicIDs: JSON.stringify(data.checkList.map(item => item.topic.id)),
                        type: 1,
                        isCourse: true,
                        method: 'collectTopics'
                    }
                })
            }

            let typeChange = (value) => {
                getCollect();
            }

            return {
                typeChange,
                questionAll,
                lookQuestion,
                removeCollect,
                handleSizeChange,
                handleCurrentChange,
                ...toRefs(data)
            }
        }
    }
</script>

<style>
    .collect .el-checkbox {
        width: 100%;
        white-space: unset;
    }

    .collect .el-checkbox__label {
        width: 100%;
        display: flex;
        align-items: center;
    }
</style>

<style scoped>
    .collect-content{
        width: 100%;
    }
    .collect-content >>> p{
        width: 90%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .check {
        margin-right: 20px;
    }

    .bottom-div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin:30px 0 20px 0;
    }

    .collect {
        width: 100%;
            font-size: 14px;
    color:#606266;
    }
      .question_collect_list{
    margin-top:30px;
  }
</style>
